<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
body{
	background:url(img/%E8%A1%A8%E6%A0%BC%E8%83%8C%E6%99%AF.png);
	background-size:cover;
}

#left{
	width:302px;
	height:202px;
	/*float:left;*/
	margin:auto;
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
}
#left table{
	width:300px;
	height:200px;
	text-align:center;
}
#right{
	float:right;
}
/*#tab{
	display:none;
}*/
</style>
</head>

<body>
<div id="all">
<div id="left">
    <table border="1">
        <tr>
           <td>账号：</td>
           <td><input type="text" id="zh" placeholder="请输入您的账号" style="opacity:0.6"></td>
        </tr>
        <tr>
           <td>密码：</td>
           <td><input type="text" id="mima" placeholder="输入您的密码" style="opacity:0.6"> </td>
        </tr>
        <tr>
           <td colspan="2"><input type="button" onClick="Denglu()" value="登录" style="opacity:0.7"><input type="button" onClick="Zhuce()" value="注册" style="opacity:0.7; width:50px;"></td>
        </tr>
        </table>
</div>
<div id="right">
    <table id="tab" border="1">
            <tr>
                <th>账号</th>
                <th>密码</th>
                <th>删除</th>
            </tr>
            <tr>
                <td>aaa</td>
                <td>123</td>
                <td>(/≧▽≦)/</td>
            </tr>
        </table>
</div>
<script>
var flag = 0;
function Denglu(){
	var name = document.getElementById("zh");
	var mima = document.getElementById("mima");
	if(name.value == "" || mima.value == "")
	{
		alert("账号和密码不能为空");
		return 0;
	}
	check(name.value,mima.value);
}
function check(name,mima){
	var tab = document.getElementById("tab");
	var  rows = tab.rows.length;
	for(var i=1;i<rows;i++)
	{
		var zh =tab.rows[i].cells[0].innerHTML
		if(name == zh){
			var mi = tab.rows[i].cells[1].innerHTML;
			if (mi == mima ) {
				alert("victory");
				location.href="主页.html";
				flag = 1;
			}
			else alert("密码输入错误");
			return 0;
		}	
	}
	if ( flag == 0 )alert("账号不存在请先注册");
}

function Zhuce(){
	var name = document.getElementById("zh");
	var mima = document.getElementById("mima");
	if(name.value == "" || mima.value == "")
	{
		alert("账号和密码不能为空");
		return 0;
	}
	
	var tab=document.getElementById("tab");
	var  rows = tab.rows.length;
	for(var i=1;i<rows;i++)
	{
		var zh =tab.rows[i].cells[0].innerHTML
		if(name.value == zh){
			alert("已有相同账号");
			return 0;
		}
		
	}
	var  row,tdName,tdMi,tdop
	  row = tab.insertRow(-1);
	  tdName = row.insertCell(-1);  
	  tdName.innerHTML = name.value;  
	  tdMi = row.insertCell(-1);  
	  tdMi.innerHTML = mima.value;  
	  tdop = row.insertCell(-1);  
	  tdop.innerHTML = "<input type='button' value='删除'  onclick='deleteT(this)'/>"; 
	
}

function deleteT(node)
{
  var tr = node.parentNode.parentNode;  
  var table = document.getElementById("tab");  
  table.deleteRow(tr.rowIndex);  		
}


</script>

</body>
</html>
